@model MvcCmsSocial.Models.ViewData.SocialModel
@{
    ViewBag.Title = "Edit Profile";
}
@section HtmlHead{
    <link href="@Url.Content("/RazorThemes/" + Model._Portal.SkinName + "/css/social.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("/RazorThemes/" + Model._Portal.SkinName + "/css/jquery.Jcrop.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("/Content/start/jquery-ui-1.7.2.custom.css")" rel="stylesheet" type="text/css" />
}

<div class="social-left">
    <form enctype="multipart/form-data" method="post" action="">
    <h1>
        @Model._User.UserName
        Edit Profile</h1>
    <a href="/social/profiles/@Model._User.UserName ">View Profile</a>
    <p>
        <!-- "Original" -->
        <img id="profilePicture" src="/uploadedimages/@Model._Portal.Name.ToUrlFormat()/Profiles/@ViewData["ProfilePic"]" />
    </p>
    <p>
        Upload Photo:
        <input type="file" id="photo" name="photo" />
    </p>
    </form>
    <div id="cropContent" style="display: none;">
        <h2>
            Crop</h2>
        <table>
            <tr>
                <td>
                    <img id="cropbox" src="" />
                </td>
                <td>
                    <div style="display: none; width: 100px; height: 100px; overflow: hidden;">
                        <img src="" id="preview" /><span style="font-size: xx-small;">preview is funky with
                            some images</span>
                    </div>
                </td>
            </tr>
        </table>
        <!-- Form Data -->
        <form action="" method="post">
        <input type="hidden" id="x" name="x" />
        <input type="hidden" id="y" name="y" />
        <input type="hidden" id="w" name="w" />
        <input type="hidden" id="h" name="h" />
        <input type="hidden" id="imageToCrop" name="imageToCrop" />
        <table>
            <tr>
                <td>
                    <span style="font-size: x-small;">Use For Profile </span>
                </td>
                <td>
                    @Html.CheckBox("makeProfile")
                </td>
                <td>
                    <span style="font-size: x-small;">Don't Crop </span>
                </td>
                <td>
                    @Html.CheckBox("dontCrop")
                </td>
                <td>
                    <button type="submit">
                        Submit</button>
                </td>
            </tr>
        </table>
        </form>
    </div>
</div>
<div class="social-right">
    About Me: <a href="javascript:void(0);" id="editAboutMeContent">Edit</a> Uses <a href="/forums/faq">Wiki</a> Code
    <div id="originalAboutMeContent" class="aboutme-preview">
        @if (Model._SocialData != null)
        {
            @MvcHtmlString.Create(Model._SocialData.AboutMe)
        } &nbsp;
    </div>
    <div id="previewAboutMeContent" class="aboutme-preview">
    </div>
</div>
<div class="clear" style="display: none;">
</div>
<div id="editAboutMeForm">
    <form action="edit-aboutme" method="post">
    <fieldset>
        <label for="Source">
            About Me Source:</label>
        @Html.TextArea("Source", string.Empty, new { @class = "aboutMeEditor" })
        <input type="submit" value="Save" />
        <input id="cancelEdit" type="button" value="Cancel" />
    </fieldset>
    </form>
</div>
@section ScriptContent{
<script src="@Url.Content("/areas/mvccmsSocial/Scripts/swfupload.js")" type="text/javascript"></script>
<script src="@Url.Content("/areas/mvccmsSocial/Scripts/jquery-asyncUpload-0.1.js")" type="text/javascript"></script>
<script src="@Url.Content("/areas/mvccmsSocial/Scripts/jquery.Jcrop.min.js")" type="text/javascript"></script>
<script src="@Url.Content("/Scripts/jquery-ui-1.7.2.custom.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    var timeout = null;
    $(function() {
        var dlg = $('#editAboutMeForm');
        var cnt = $('#editAboutMeContent');
        var cntPos = cnt.position();
        dlg.dialog({ autoOpen: false,
            width: 750,
            position: [cntPos.left + 150 + cnt.outerWidth(), cntPos.top + cnt.outerHeight()-50],
            resizable: true,
            beforeclose: function() { $('#originalAboutMeContent').show(); $('#previewAboutMeContent').hide(); }
        });
        cnt.click(function() {
            if (!dlg.dialog('isOpen')) {
                $.post('/mvccmsSocialAjax/GetAboutMeSource',
                function(data) {
                    $('#Source').val(data);
                    var original = $('#originalAboutMeContent');
                    original.hide();
                    $('#previewAboutMeContent').html(original.html()).show();
                    dlg.dialog('open');
                });
            } else {
                dlg.dialog('close');
            }
        });

        $('#Source').keyup(function(e) {
            if (timeout != null) {
                clearTimeout(timeout);
                timeout = null;
            }

            var self = $(this);
            timeout = setTimeout(function() {
                $.post('/mvccmsSocialAjax/GetAboutMePreview',
                        { source: self.val() },
                        function(data) { $('#previewAboutMeContent').html(data); });
            }, 250);
        });

        $('#cancelEdit').click(function() {
            $('#editAboutMeForm').dialog('close');
        });
    });

    $(function() {
        $("#photo").makeAsyncUploader({
            upload_url: '/mvccmsSocialAjax/AsyncUpload',
            flash_url: '/areas/mvccmsSocial/Scripts/swfupload.swf',
            button_image_url: '/areas/mvccmsSocial/Content/blankButton.png',
            disableDuringUpload: 'INPUT[type="submit"]',
            post_params : {
                ASPSESSID : '@Session.SessionID',
                AUTHID: '@(Request.Cookies[FormsAuthentication.FormsCookieName]==null ? "" : Request.Cookies[FormsAuthentication.FormsCookieName].Value)'
            }
        });
    });

    function UploadCompleteCallback() {
        if($.browser.msie){
            location.reload();
        }
        var newSrc = $("#photo_guid").val();

        $("#photo").attr("src", "/uploadedimages/@Model._Portal.Name.ToUrlFormat()/Profiles/" + newSrc);
        $("#cropbox").attr("src", "/uploadedimages/@Model._Portal.Name.ToUrlFormat()/Profiles/" + newSrc);
        $("#preview").attr("src", "/uploadedimages/@Model._Portal.Name.ToUrlFormat()/Profiles/" + newSrc);
        $("#imageToCrop").val(newSrc);
        $("#cropContent").show("slow");
        hasBeenUploaded=true;
    jQuery('#cropbox').Jcrop({
      onChange: showPreview,
      onSelect: showPreview,
      aspectRatio: 1
    });
    }

    // Our simple event handler, called from onChange and onSelect
    // event handlers, as per the Jcrop invocation above
    function showPreview(coords)
    {
      if (parseInt(coords.w) > 0)
      {
        var rx = 100 / coords.w;
        var ry = 100 / coords.h;

        jQuery('#preview').css({
          width: Math.round(rx * 500) + 'px',
          height: Math.round(ry * 370) + 'px',
          marginLeft: '-' + Math.round(rx * coords.x) + 'px',
          marginTop: '-' + Math.round(ry * coords.y) + 'px'
        });
          }

          $('#x').val(coords.x);
          $('#y').val(coords.y);
          $('#w').val(coords.w);
          $('#h').val(coords.h);
    }

</script>
}